<template>
  <div>
    <!-- <p v-for="(item,index) in list" :key="index">
        {{item}}  ----- {{index}}
    </p> -->
    <!-- <div v-for="(item,index) in list" :key="index">
      <p>{{item.name}}</p>
      <p>{{item.price}}</p>
    </div> -->


    <div v-for="(item,index) in list" :key="index" class="flex">
      <div>
        <img width="50" :src="item.avatar">
      </div>
      <div>
        <p>{{item.title}}</p>
        <p>{{item.date}}</p>
      </div>
      <!-- <div>
        {{item.type == 0 ? '-' : '+'}}
        {{item.num}}
        </div> -->

        <!-- <div>
          <span v-if="item.type == 0">-</span>
          <span v-if="item.type == 1">+</span>
          {{item.num}}
        </div> -->


        <div>
          <span v-if="item.type == 0">-</span>
          <span v-else>+</span>
          {{item.num}}
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            list: [
              {
                avatar: require('@/assets/1.webp'),
                title: '扫二维码付款-给余军',
                date: '2月28日 08:42',
                num: '9',
                type: 0// 0 支出     1收入
              },
              {
                avatar: require('@/assets/1.webp'),
                title: '晋中瑞达公交',
                date: '2月28日08:17',
                num: '3',
                type: 0// 0 支出     1收入
              },
              {
                avatar: require('@/assets/1.webp'),
                title: '转账-来自信思-吕伟强',
                date: '2月27日10:25',
                num: '180',
                type: 1// 0 支出     1收入
              }
            ]
        }
    }
}
</script>

<style scoped>
.flex{
  display: flex;
}
</style>